<template>
  <view class="main">
    <view class="search-box">
      <view class="seach">
        <uni-icons type="search" size="30"></uni-icons>
        <input @confirm="goToGoodsList" class="uni-input" focus placeholder="请输入搜索内容" @input="getValue" />
      </view>
    </view>
    <view class="seachBeRelatedToBox" v-if="flag === true">
      <view class="seachBeRelatedTo" v-for="item in searchList" :key="item.cat_id" @click="goToList(item)">
        <text>{{item.goods_name}}</text>
        <uni-icons type="forward" size="20"></uni-icons>
      </view>
    </view>
    <block v-else>
      <view class="seachBeRelatedTo">
        <text>搜索历史</text>
        <uni-icons type="trash" size="20" @click="deleBeRelatedTo"></uni-icons>
      </view>
      <view class="beRelatedToTextBox">
        <view @click="toGoodsList(item)" class="beRelatedToText" v-for="(item,index) in msgList" :key="index">
          <text>{{item}}</text>
        </view>
      </view>

    </block>

  </view>

</template>

<script>
  export default {
    data() {
      return {
        msg: '',
        searchList: [],
        flag: false,
        timer: undefined,
        msgList: uni.getStorageSync('msg') || []
      }
    },
    methods: {
      // 获取input输入的值
      getValue(e) {
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.msg = e.detail.value
          this.getSearchList()
        }, 1000);
      },
      // 跳转列表
      toGoodsList(item) {
        console.log(1);
        uni.navigateTo({
          // goods_list/goods_list
          url: '/subpkg/goods_list/goods_list?query=' + item
        })
      },
      goToGoodsList(e) {
        if (e.detail.value.trim()) {
          uni.navigateTo({
            // goods_list/goods_list
            url: '/subpkg/goods_list/goods_list?query=' + e.detail.value
          })
        }

      },
      // 获取搜索数据 /api/public/v1/goods/search
      async getSearchList() {

        this.flag = false
        if (!this.msg.trim()) {
          return
        }
        this.flag = true
        const result = await uni.$http.get('/api/public/v1/goods/search', {
          query: this.msg
        })
        this.searchList = result.data.message.goods
        // 判断里面有没有相同的历史记录
        const isRepeat = this.msgList.some(value => value === this.msg)
        if (isRepeat) {
          // 进来了就说明有 那么给他过滤掉 重新赋值
          this.msgList = this.msgList.filter(value => value !== this.msg)
        }
        // 加进去
        if (this.msg.trim()) {
          this.msgList.unshift(this.msg)
        }
        uni.setStorageSync('msg', this.msgList)
      },
      deleBeRelatedTo() {
        uni.showModal({
          title: '提示',
          content: '您确定要全部删除吗',
          success: (res) => {
            if (res.confirm) {
              this.msgList = []
              uni.removeStorageSync('msg')
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
        // this.msgList = []
        // uni.removeStorageSync('msg')
      },
      goToList(e) {
        uni.navigateTo({
          // goods_list/goods_list
          url: '/subpkg/goods_list/goods_list?query=' + e.goods_name
        })
      }
    }
  }
</script>

<style lang="scss">
  .search-box {
    display: flex;
    align-items: center;
    height: 100rpx;
    background-color: #C00000;

    .seach {
      display: flex;
      width: 90%;
      height: 80rpx;
      line-height: 80rpx;
      margin: 0 auto;
      text-align: center;
      border-radius: 90rpx;
      background-color: white;

      text {
        margin-left: 20rpx;
      }

      input {
        text-align: left;
        margin-top: 16rpx;
        margin-left: 10rpx;
      }
    }
  }

  .seachBeRelatedTo {
    display: flex;
    width: 100%;
    height: 100rpx;
    border-bottom: 2rpx solid #ccc;
    line-height: 100rpx;
    justify-content: space-between;

    text {
      width: 88%;
      margin-left: 20rpx;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    uni-icons {
      margin-right: 20rpx;
    }
  }

  .beRelatedToTextBox {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    .beRelatedToText {
      border: 1px solid #ccc;
      padding: 10rpx 40rpx;
    }
  }
</style>